<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新手引导</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/8.0.2/alt/video-js-cdn.css" rel="stylesheet">
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .video-css {
        position: absolute;
        top: 0.38rem;
        left: 0.54rem;
        width: 6.42rem;
        height: 3.62rem;
        overflow: hidden;
    }

    .video-js {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        color: #fff;
        background-color: #000;
        /* position: relative; */
        padding: 0;
        font-size: 10px;
        line-height: 1;
        font-weight: normal;
        font-style: normal;
        font-family: Arial, Helvetica, sans-serif;
        word-break: initial;
    }

    .vjs-control-bar {
        border-radius: 0.14rem
    }
</style>
<body>
<div class="big_pic" style="position: relative">
    {if condition="$has_video"}
    <video style="border-radius: 0.14rem" id="example_video" class="video-js vjs-default-skin vjs-big-play-centered video-css"></video>
    <img src="https://oss.goddessxzns.com/test/map/acg_map_new.png" width="100%" height="auto" style="display: block"/>
    {else /}
    <img src="https://oss.goddessxzns.com/test/map/acg_map.png" width="100%" height="auto" style="display: block"/>
    {/if}
</div>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
<script src="/static/jquery-3.1.1.min.js"></script>
<script src="/static/astro_explain_new/js/rem.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.bootcdn.net/ajax/libs/video.js/8.0.2/alt/video.core.js"></script>
<script type="text/javascript">
    if ($('#example_video').length && $('#example_video').length > 0) {
        var myPlayer = videojs('example_video', {
            playbackRates: [0.5, 1, 1.5, 2],
            muted: false,
            loop: false,
            controls: true,
            autoplay: false,
            preload: 'auto',
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
            poster: 'https://oss.goddessxzns.com/test/map/acg_map_poster.png',
            sources: [{
                src: 'https://oss.goddessxzns.com/test/example_video/%E5%B9%B8%E8%BF%90%E4%B9%8B%E5%9F%8E%E5%8A%9F%E8%83%BD%E7%AE%80%E4%BB%8B.mp4',
                type: 'video/mp4'
            }]
        });
    }
</script>
